<template>
    <div>
        <el-row :gutter="20" style="margin:10px;">
             <el-col :span="3" :offset="14">
                <el-select v-model="checktype" placeholder="请选择"  @change="getData">
                  <el-option
                  v-for="item in checkType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
                </el-select>
            </el-col>
            <el-col :span="3">
               <el-input v-model="plant" @blur="getData"/>
            </el-col>
            <el-col :span="3">
               <el-select v-model="workshop" placeholder="请选择" @change="getData">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
                </el-select>
            </el-col>
        </el-row>
        <ve-line :data="chartData" height="600px"></ve-line>
    </div>
</template>
<script>
  import VeLine from 'v-charts/lib/bar.common.js'
  import {useenergy} from '../../api/api'
  export default {
    data () {
      return {
        chartData: {},
        options: [{
          value: '1',
          label: '车间1'
          }, {
          value: '2',
          label: '车间2'
          }, {
          value: '3',
          label: '车间3'
          }],
        workshop: '1', //车间
        checkType:[{
          value: '1',
          label: '本周能耗'
          }, {
          value: '2',
          label: '本月能耗'
          }, {
          value: '3',
          label: '季度能耗'
          }],
        checktype:'1',
        plant:'厂房1' //厂房
      }
    },
    created(){
      if(this.$route.query.plant){
        this.value = this.$route.query.workshop;
        this.plant = `厂房${this.$route.query.plant}`;
      }
      this.getData();
    },
    methods:{
      getData(){
        let plant = this.plant.replace(/[^0-9]/ig,"");
        let params = {checktype:this.checktype,plant:plant,workshop:this.workshop};
        useenergy(params).then(res=>{
          if(res.length == 0){
            this.$message({
                  message:this.plant+"不存在",
                  type: 'error'
                });
            this.plant = '厂房1';
            return this.getData();
          }
          let arr= [];
          let workshop = null;
          res.forEach((item,index) => {
            let e = 1;
            switch(this.checktype){
                case '1':
                  break;
                case '2':
                    e = 7;
                  break;
                default:
                  e = 90;
            }
            let obj = {};
            obj.冷气量 = item.cold*e;
            obj.暖气量 = item.warm*e;
            console.log(this.checktype,e,obj.冷气量,item.cold);
            obj.总用量 = obj.冷气量+obj.暖气量;
            arr.push(obj);
          });
          let date = new Date();
          let year = date.getFullYear();
          let month = date.getMonth()+1;
          let _date = date.getDate();
          switch(this.checktype){
            case '1':
              arr.splice(0,arr.length-7);
              for(var i=0; i<7; i++)
                arr[i].日期 = year+"/"+month+"/"+(_date-i);
              break;
            case '2':
              let day = date.getDay();
              let sun = _date-day;
              if(sun<=0)
                arr = null;
              else{
                let num = _date/7;
                arr.splice(0,arr.length-num);
                for(let i=0; i<num;i++)
                  arr[i].日期 = year+"/"+month+"/"+(sun-i*7);
              }
              break;
            default:
              let num = parseInt(month/3)+1;   //一共num个季度
              arr.splice(0,arr.length-num);
              for(let i=0; i<num; i++)
                arr[i].日期 = "第"+(num-i)+"季度";
          }
          this.chartData = {
              columns: ['日期', '冷气量', '暖气量', '总用量'],
              rows: arr
          }; 
        });
      }
    },
    components:{ VeLine }
  }
</script>

<style lang="scss" scoped>

</style>

